﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Metropolis - Blog</title>
        <meta name="description" content="Multipurpose HTML5 Themplate">
        <meta name="author" content="pixel-industry">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">


        <!-- stylesheets -->
        <link rel="stylesheet" href="css/basic.css" />
        <link rel="stylesheet" href="css/style.css" />   
        <link rel="stylesheet" href="css/responsive.css" />   
        <link rel="stylesheet" href="css/red.css" />
        <link rel="stylesheet" href="css/nivo-slider.css" />
        <link rel="stylesheet" href="js/jplayer/skin/pixel-industry/pixel-industry.css" />

        <!-- Fonts -->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic' rel='stylesheet' type='text/css'>

        <!-- Icons -->
        <link rel="stylesheet" href="pixons/style.css" />
        <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
        
        <link rel="stylesheet" href="style-switcher/styleSwitcher.css" media="screen" />

        <!--[if lt IE 9]>
            <script src="js/html5shiv.js"></script>
        <![endif]-->
        
        <!--[if lt IE 9]>
            <script src="js/selectivizr-min.js"></script>
        <![endif]-->
        
        <!--[if IE 8]>
            <link rel="stylesheet" href="css/ie8.css" media="screen" />
        <![endif]-->
    </head>

    <body>
         <!-- style switcher start -->
        <section id="style-switcher">
            <section id="styles-container">
                <section>
                    <h6>Layouts</h6>
                    <ul class="skin-list">
                        <li class="metropolis-default"><a href="../metropolis-default/blog.html">Default</a></li>
                        <li class="metropolis-clean active"><a href="#">Clean & Minimal</a></li>
                        <li class="metropolis-blue"><a href="../metropolis-blue/blog.html">Creative Blue</a></li>
                    </ul>
                </section>

                <section class="first">
                    <h6>Color Style</h6>
                    <p>Which theme color you want to use? Here are some predefined colors.</p>
                    <ul class="styles-list">
                        <li class="blue">1</li>
                        <li class="green">2</li>
                        <li class="orange">3</li>                        
                        <li class="red">4</li>
                        <li class="yellow">5</li>
                    </ul>
                </section>
            </section>
            <a href="#" id="styles-button"><div id="switcher-logo"></div></a>
        </section><!-- style switcher end -->
        
        <!-- #header-wrapper start -->
        <section id="header-wrapper" class="clearfix">
            <!-- #header start -->
            <header id="header" class="clearfix">

                <!-- #logo start -->
                <section id="logo">
                    <a href="index.html">
                        <img src="img/red/logo.png" alt="logo" />
                    </a>
                </section><!-- #logo end -->

                <!-- contact-info-container -->
                <section id="contact-info-container">
                    <ul class="info">
                        <li>
                            <span class="text-dark">Call us on:</span> +00 123 5874
                        </li>

                        <li>
                            <span class="text-dark">Email: </span>
                            <a class="text-color" href="malito:sales-info@business.com">sales-info@business.com</a>
                        </li>
                    </ul>

                    <ul class="social-links">
                        <li>
                            <a href="#" class="pixons-twitter-1"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-linkedin"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-facebook-1"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-xing"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-skype"></a>
                        </li>
                    </ul>
                </section><!-- .contact-info-container end -->
            </header><!-- #header end -->

            <!-- #nav-container start -->
            <section id="nav-container">

                <section class="container_12">
                    <section class="grid_12">
                        <!-- #nav start -->
                        <nav id="nav">
                            <ul>
                                <li>
                                    <span class="nav-icon icon-home"></span>
                                    <a href="index.html">Home</a>
                                </li>

                                <li>
                                    <span class="nav-icon icon-user"></span>
                                    <a href="#">Pages</a>
                                    <ul>
                                        <li><a href="about.html">About</a></li>
                                        <li><a href="services.html">Services</a></li>
                                        <li><a href="faq.html">FAQ</a></li>
                                        <li><a href="page-sidebar-left.html">Page sidebar left</a></li>
                                        <li><a href="page-sidebar-right.html">Page sidebar right</a></li>
                                        <li><a href="pricing.html">Pricing tables</a></li>
                                    </ul>
                                </li>

                                <li>
                                    <span class="nav-icon icon-camera"></span>
                                    <a href="#">Portfolio</a>
                                    <ul>
                                        <li><a href="portfolio1.html">Portfolio 1</a></li>
                                        <li><a href="portfolio2.html">Portfolio 2</a></li>
                                        <li><a href="portfolio2-alt.html">Portfolio 2 alternative</a></li>
                                        <li><a href="portfolio3.html">Portfolio 3</a></li>
                                        <li><a href="portfolio3-alt.html">Portfolio 3 alternative</a></li>
                                        <li><a href="portfolio4.html">Portfolio 4</a></li>
                                        <li><a href="portfolio4-alt.html">Portfolio 4 alternative</a></li>
                                        <li><a href="portfolio-gallery.html">Portfolio gallery</a></li>
                                        <li><a href="portfolio-single.html">Portfolio single</a></li>
                                    </ul>
                                </li>

                                <li class="current-menu-item">
                                    <span class="nav-icon icon-list"></span>
                                    <a href="#">Blog</a>

                                    <ul>
                                        <li class="current-menu-item"><a href="blog.html">Blog default</a></li>
                                        <li><a href="blog-alt.html">Blog alternative</a></li>
                                        <li><a href="blog-single.html">Blog single</a></li>
                                    </ul>
                                </li>

                                <li>
                                    <span class="nav-icon icon-cogs"></span>
                                    <a href="#">Shortcodes</a>
                                    <ul>
                                        <li><a href="shortcodes.html">Page elements</a></li>
                                        <li><a href="#">Third level</a>
                                            <ul>
                                                <li><a href="#">Menu item</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>

                                <li>
                                    <span class="nav-icon icon-map-marker"></span>
                                    <a href="contact.html">Contact</a>
                                </li>
                            </ul>
                        </nav><!-- #nav end -->
                        
                        <!-- responsive navigation start -->
                        <select id="nav-responsive">
                            <option selected="" value="">Site Navigation...</option>

                            <option value="index.html">Home version 1</option>

                            <option value="about.html">About us</option>
                            <option value="services.html">Services</option>
                            <option value="faq.html">FAQ Page</option>
                            <option value="page-sidebar-left.html">Page sidebar left</option>
                            <option value="page-sidebar-right.html">Page sidebar right</option>
                            <option value="pricing.html">Pricing tables</option>

                            <option value="portfolio1.html">Portfolio 1 column</option>
                            <option value="portfolio2.html">Portfolio 2 columns</option>
                            <option value="portfolio2-alt.html">Portfolio 2 alternative</option>
                            <option value="portfolio3.html">Portfolio 3 columns</option>
                            <option value="portfolio3-alt.html">Portfolio 3 alternative</option>
                            <option value="portfolio4.html">Portfolio 4 columns</option>
                            <option value="portfolio4-alt.html">Portfolio 4 alternative</option>
                            <option value="portfolio-gallery.html">Portfolio gallery</option>
                            <option value="portfolio-single.html">Portfolio single</option>

                            <option value="blog.html">Blog default</option>
                            <option value="blog-alt.html">Blog alternative</option>
                            <option value="blog-single.html">Blog single</option>

                            <option value="shortcodes.html">Shortcodes</option>
                            <option value="contact.html">Contact</option>
                        </select><!-- responsive navigation end -->

                        <section id="search-box">
                            <form action="#" method="get">
                                <input id="m_search" name="s" type="text" placeholder="Type and hit enter..." />
                                <input class="search-submit" type="submit" />
                            </form>
                        </section>
                    </section><!-- .grid_12 end -->
                </section><!-- .container_12 end -->

            </section><!-- #nav-container end -->
        </section><!-- #header-wrapper start -->

        <!-- .top-shadow -->
        <div class="top-shadow"></div>

        <!-- .page-title-container start -->
        <section class="page-title-container">

            <!-- .container_12 start -->
            <div class="container_12">

                <!-- .page-title start -->
                <div class="page-title grid_12">
                    <div class="title">
                        <h1>Blog</h1>
                    </div>

                    <ul class="breadcrumbs">
                        <li><a  class="home" href="#">Home</a></li>
                        <li>/</li>
                        <li><span class="active">Blog</span></li>
                    </ul>
                </div><!-- .page-title end -->
            </div><!-- .container_12 end -->
        </section><!-- .page-title-container end -->

        <!-- #content-wrapper start -->
        <section id="content-wrapper">
            <div class="container_12">

                <!-- .grid_8 .blog-posts start -->
                <ul class="grid_8 blog-posts">

                    <!-- .blog-post .format standard sticky  start -->
                    <li class="blog-post format-standard clearfix">  
                        <section class="blog-meta">
                            <div class="category">
                                <i class="icon-edit"></i>
                            </div>

                            <ul>
                                <li>
                                    <span class="text-dark">Posted: </span>Apr 28, 2013
                                </li>

                                <li>
                                    <span class="text-dark">By: </span>
                                    <a href="#">Admin</a>
                                </li>

                                <li>
                                    <span class="text-dark">Comments: </span>
                                    <a href="blog-single.html">2</a>
                                </li>
                            </ul>
                        </section><!-- .blog-meta end -->

                        <!-- .post-body start -->
                        <section class="post-body">
                            <a href="blog-single.html" class="post-img">
                                <img src="img/blog/blog-1.jpg" width="490" alt="blog image">
                            </a>

                            <a href="blog-single.html">
                                <h3>Standard Blog Post With Image</h3>
                            </a>

                            <ul class="tags">
                                <li>
                                    <span class="text-dark">Tags: </span>
                                </li>
                                <li>
                                    <a href="#">standard, </a>
                                </li>
                                <li>
                                    <a href="#">photo, </a>
                                </li>
                                <li>
                                    <a href="#">sticky, </a>
                                </li>
                                <li>
                                    <a href="#">category, </a>
                                </li>
                                <li>
                                    <a href="#">blog</a>
                                </li>
                            </ul>

                            <p>
                                Lorem ipsum dolor sit amet nec, consectetuer 
                                adipiscing elit. Aenean commodo ligula eget 
                                dolor. Aenean massa. Cum sociis natoque 
                                penatibus et magnis dis parturient montes. 
                                Lorem ipsum dolor sit amet nec, consectetuer 
                                adipiscing elit. Aenean commodo ligula eget 
                                dolor.
                            </p>

                            <div class="read-more-btn">
                                <a href="blog-single.html">Read more</a>
                                <span class="plus">+</span>
                            </div>
                        </section><!-- .post-body end -->
                    </li><!-- .blog-post .standard .stiky end -->

                    <!-- .blog-post .format-gallery start -->
                    <li class="blog-post format-gallery clearfix">
                        <section class="blog-meta">
                            <div class="category">
                                <i class="icon-camera"></i>
                            </div>

                            <ul>
                                <li>
                                    <span class="text-dark">Posted: </span>Apr 28, 2013
                                </li>

                                <li>
                                    <span class="text-dark">By: </span>
                                    <a href="#">Admin</a>
                                </li>

                                <li>
                                    <span class="text-dark">Comments: </span>
                                    <a href="blog-single.html">2</a>
                                </li>
                            </ul>
                        </section><!-- .blog-meta end -->

                        <!-- .post-body start -->
                        <section class="post-body">
                            <article id="slider" class="nivoSlider blog-slider">
                                <img src="img/blog/blog-2.jpg" alt="image slide">
                                <img src="img/blog/blog-3.jpg" alt="image slide">
                                <img src="img/blog/blog-4.jpg" alt="image slide">
                            </article>

                            <a href="blog-single.html">
                                <h3>Blog Post With Gallery</h3>
                            </a>

                            <ul class="tags">
                                <li>
                                    <span class="text-dark">Tags: </span>
                                </li>
                                <li>
                                    <a href="#">gallery, </a>
                                </li>
                                <li>
                                    <a href="#">photo, </a>
                                </li>
                                <li>
                                    <a href="#">slider, </a>
                                </li>
                                <li>
                                    <a href="#">category, </a>
                                </li>
                                <li>
                                    <a href="#">blog</a>
                                </li>
                            </ul>

                            <p>
                                Lorem ipsum dolor sit amet nec, consectetuer 
                                adipiscing elit. Aenean commodo ligula eget 
                                dolor. Aenean massa. Cum sociis natoque 
                                penatibus et magnis dis parturient montes. 
                                Lorem ipsum dolor sit amet nec, consectetuer 
                                adipiscing elit. Aenean commodo ligula eget 
                                dolor.
                            </p>

                            <div class="read-more-btn">
                                <a href="blog-single.html">Read more</a>
                                <span class="plus">+</span>
                            </div>
                        </section><!-- .post-body end -->
                    </li><!-- .blog-post .format-gallery end -->

                    <li class="blog-post format-video clearfix">
                        <section class="blog-meta">
                            <div class="category">
                                <i class="icon-play"></i>
                            </div>

                            <ul>
                                <li>
                                    <span class="text-dark">Posted: </span>Apr 28, 2013
                                </li>

                                <li>
                                    <span class="text-dark">By: </span>
                                    <a href="#">Admin</a>
                                </li>

                                <li>
                                    <span class="text-dark">Comments: </span>
                                    <a href="blog-single.html">2</a>
                                </li>
                            </ul>
                        </section><!-- .blog-meta end -->

                        <!-- .post-body start -->
                        <section class="post-body">
                            <iframe src="http://player.vimeo.com/video/1084537?byline=0&amp;"></iframe>

                            <a href="blog-single.html">
                                <h3>Blog Post With Vimeo Video</h3>
                            </a>

                            <ul class="tags">
                                <li>
                                    <span class="text-dark">Tags: </span>
                                </li>
                                <li>
                                    <a href="#">gallery, </a>
                                </li>
                                <li>
                                    <a href="#">photo, </a>
                                </li>
                                <li>
                                    <a href="#">slider, </a>
                                </li>
                                <li>
                                    <a href="#">category, </a>
                                </li>
                                <li>
                                    <a href="#">blog</a>
                                </li>
                            </ul>

                            <p>
                                Lorem ipsum dolor sit amet nec, consectetuer 
                                adipiscing elit. Aenean commodo ligula eget 
                                dolor. Aenean massa. Cum sociis natoque 
                                penatibus et magnis dis parturient montes. 
                                Lorem ipsum dolor sit amet nec, consectetuer 
                                adipiscing elit. Aenean commodo ligula eget 
                                dolor.
                            </p>

                            <div class="read-more-btn">
                                <a href="blog-single.html">Read more</a>
                                <span class="plus">+</span>
                            </div>
                        </section><!-- .post-body end -->
                    </li>

                    <!-- .blog-post .format-audio start -->
                    <li class="blog-post format-audio clearfix"> 
                        <section class="blog-meta">
                            <div class="category">
                                <i class="icon-microphone"></i>
                            </div>

                            <ul>
                                <li>
                                    <span class="text-dark">Posted: </span>Apr 28, 2013
                                </li>

                                <li>
                                    <span class="text-dark">By: </span>
                                    <a href="#">Admin</a>
                                </li>

                                <li>
                                    <span class="text-dark">Comments: </span>
                                    <a href="blog-single.html">2</a>
                                </li>
                            </ul>
                        </section><!-- .blog-meta end -->

                        <!-- .post-body start -->
                        <section class="post-body">
                            <div id="jquery_jplayer_1" class="jp-jplayer"></div>

                            <div id="jp_container_1" class="jp-audio">
                                <div class="jp-type-playlist">
                                    <div class="jp-gui jp-interface">
                                        <ul class="jp-controls">
                                            <li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
                                            <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                                            <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                                            <li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
                                            <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                                            <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                                            <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                                            <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                                        </ul>
                                        <div class="jp-progress">
                                            <div class="jp-seek-bar">
                                                <div class="jp-play-bar"></div>
                                            </div>
                                        </div>
                                        <div class="jp-volume-bar">
                                            <div class="jp-volume-bar-value"></div>
                                        </div>
                                        <div class="jp-time-holder">
                                            <div class="jp-current-time"></div>
                                            <div class="jp-duration"></div>
                                        </div>
                                        <ul class="jp-toggles">
                                            <li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
                                            <li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
                                            <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                                            <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
                                        </ul>
                                    </div>
                                    <div class="jp-no-solution">
                                        <span>Update Required</span>
                                        To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                                    </div>
                                </div>
                            </div><!-- .jp-audio -->

                            <a href="blog-single.html">
                                <h3>Blog Post With Audio Track</h3>
                            </a>

                            <ul class="tags">
                                <li>
                                    <span class="text-dark">Tags: </span>
                                </li>
                                <li>
                                    <a href="#">gallery, </a>
                                </li>
                                <li>
                                    <a href="#">photo, </a>
                                </li>
                                <li>
                                    <a href="#">slider, </a>
                                </li>
                                <li>
                                    <a href="#">category, </a>
                                </li>
                                <li>
                                    <a href="#">blog</a>
                                </li>
                            </ul>

                            <p>
                                Lorem ipsum dolor sit amet nec, consectetuer 
                                adipiscing elit. Aenean commodo ligula eget 
                                dolor. Aenean massa. Cum sociis natoque 
                                penatibus et magnis dis parturient montes. 
                                Lorem ipsum dolor sit amet nec, consectetuer 
                                adipiscing elit. Aenean commodo ligula eget 
                                dolor.
                            </p>

                            <div class="read-more-btn">
                                <a href="blog-single.html">Read more</a>
                                <span class="plus">+</span>
                            </div>
                        </section><!-- .post-body end -->
                    </li><!-- blog-post .format-audio end -->

                    <!-- .blog-post .format-quote start -->
                    <li class="blog-post format-quote clearfix">
                        <section class="blog-meta">
                            <div class="category">
                                <i class="icon-quote-left"></i>
                            </div>

                            <ul>
                                <li>
                                    <span class="text-dark">Posted: </span>Apr 28, 2013
                                </li>

                                <li>
                                    <span class="text-dark">By: </span>
                                    <a href="#">Admin</a>
                                </li>

                                <li>
                                    <span class="text-dark">Comments: </span>
                                    <a href="blog-single.html">2</a>
                                </li>
                            </ul>
                        </section><!-- .blog-meta end -->

                        <!-- .post-body start -->
                        <section class="post-body">
                            <blockquote>
                                Quisque odio urna, ultrices non volutpat 
                                lacinia, scelerisque sit amet justo. Quisque 
                                venenatis sapien id eros pulvinar sit amet 
                                posuere lacus gravida. Aenean accumsan placerat 
                                nulla, dictum semper turpis scelerisque sit amet.

                                <cite>- Mathew, business.com</cite>
                            </blockquote>

                        </section><!-- .post-body end -->
                    </li><!-- .blog-post .format-quote end -->

                    <!-- .blog-post .format-link start -->
                    <li class="blog-post format-link clearfix">
                        <section class="blog-meta">
                            <div class="category">
                                <i class="icon-link"></i>
                            </div>

                            <ul>
                                <li>
                                    <span class="text-dark">Posted: </span>Apr 28, 2013
                                </li>

                                <li>
                                    <span class="text-dark">By: </span>
                                    <a href="#">Admin</a>
                                </li>

                                <li>
                                    <span class="text-dark">Comments: </span>
                                    <a href="blog-single.html">2</a>
                                </li>
                            </ul>
                        </section><!-- .blog-meta end -->

                        <!-- .post-body start -->
                        <section class="post-body">
                            <a href="blog-single.html">
                                <h3>Blog Post With Link</h3>
                            </a>

                            <ul class="tags">
                                <li>
                                    <span class="text-dark">Tags: </span>
                                </li>
                                <li>
                                    <a href="#">gallery, </a>
                                </li>
                                <li>
                                    <a href="#">photo, </a>
                                </li>
                                <li>
                                    <a href="#">slider, </a>
                                </li>
                                <li>
                                    <a href="#">category, </a>
                                </li>
                                <li>
                                    <a href="#">blog</a>
                                </li>
                            </ul>

                            <a class="link" href="google.com">This is external link to google.com</a>

                            <p>
                                Lorem ipsum dolor sit amet nec, consectetuer 
                                adipiscing elit. Aenean commodo ligula eget 
                                dolor. Aenean massa.
                            </p>

                        </section><!-- .post-body end -->
                    </li><!-- .blog-post .format-link end -->

                    <li class="pagination">
                        <a class="pagination-prev" href="#">&#60; Previous</a>

                        <div class="pager">
                            <ul>
                                <li class="active">
                                    <a href="#">1</a>
                                </li>

                                <li>
                                    <a href="#">2</a>
                                </li>

                                <li>
                                    <a href="#">3</a>
                                </li>
                            </ul>
                        </div>

                        <a class="pagination-next" href="#">Next &#62;</a>
                    </li><!-- .pagination end -->
                </ul><!-- .grid_8 .blog-posts end -->

                <!-- aside right start -->
                <aside class="grid_4 aside-right">

                    <!-- .widget start -->
                    <ul class="aside_widgets">

                        <!-- .widget_search start -->
                        <li class="widget widget_search">
                            <div class="title">
                                <h5>search</h5>
                            </div>

                            <form action="#" method="get">
                                <input id="a_search" name="s" type="text" placeholder="Type and hit enter..." />
                                <input class="search-submit" type="submit" />
                            </form>
                        </li>

                        <!-- .widget_categories start -->
                        <li class="widget widget_categories">
                            <div class="title">
                                <h5>blog categories</h5>
                            </div>

                            <ul>
                                <li><a href="blog-single.html">Design and development (6)</a></li>
                                <li><a href="blog-single.html">Wordpress themes (5)</a></li>
                                <li><a href="blog-single.html">Company news (3)</a></li>
                                <li><a href="blog-single.html">Print design (1)</a></li>
                                <li><a href="blog-single.html">The best of photography (2)</a></li>
                                <li><a href="blog-single.html">Learning jQuery (5)</a></li>
                            </ul>  
                        </li><!-- .widget_recent_entries end -->

                        <!-- .widget_recent_entries start -->
                        <li class="widget pi_recent_posts">
                            <div class="title">
                                <h5>latest posts</h5>
                            </div>

                            <ul class="footer-blog">
                                <li>
                                    <div class="meta">
                                        <a class="icon-edit"></a>
                                    </div>

                                    <div class="post">
                                        <a href="blog-single.html"> Nam libero tempore, </a>
                                        <p class="info">26 MARCH 2013, <a href="blog-single.html">0 COMMENTS</a></p>
                                    </div>
                                </li>

                                <li>
                                    <div class="meta">
                                        <a class="icon-link"></a>
                                    </div>

                                    <div class="post">
                                        <a href="blog-single.html">Temporibus autem quibusdam, </a>
                                        <p class="info">26 MARCH 2013, <a href="blog-single.html">2 COMMENTS</a></p>
                                    </div>
                                </li>

                                <li>
                                    <div class="meta">
                                        <a class="icon-camera"></a>
                                    </div>

                                    <div class="post">
                                        <a href="blog-single.html">Excepteur sint occaecat cupid ata, </a>
                                        <p class="info">26 MARCH 2013, <a href="blog-single.html">2 COMMENTS</a></p>
                                    </div>
                                </li>
                            </ul>
                        </li><!-- .widget_recent_entries end -->

                        <!-- pi_testimonial -->
                        <li class="widget pi_testimonial">
                            <div class="title">
                                <h5>testimonials</h5>
                            </div>

                            <section class="carousel-testimonial">
                                <ul id="foo2" class="carousel-li">
                                    <li>
                                        <p class="content">
                                            Lorem ipsum dolor sit amet, 
                                            consectetuer adipiscing elit, 
                                            sed diam nonummy nibh euismod 
                                            tincidunt ut laoreet dolore magna 
                                            aliquam erat volutpat. Ut wisi enim 
                                            ad minim veniam, quis nostrud.
                                        </p>

                                        <span class="author">- John Doe, business.com</span>
                                    </li>

                                    <li>
                                        <p class="content">
                                            Sed ut perspiciatis unde omnis iste natus error 
                                            sit voluptatem accusantium doloremque laudantium, 
                                            totam rem aperiam, eaque ipsa quae ab illo 
                                            inventore veritatis et quasi. 
                                        </p>

                                        <span class="author">- Mathew, business.com</span>
                                    </li>

                                    <li>
                                        <p class="content">
                                            Lorem ipsum dolor sit amet nec, 
                                            consectetuer adipiscing elit. Aenean 
                                            commodo ligula eget dolor. Aenean
                                            massa. Cum sociis natoque penatibus 
                                            et magnis dis parturient montes. 
                                            Lorem ipsum dolor sit amet nec, 
                                            consectetuer adipiscing elit. 
                                            Aenean commodo ligula eget dolor. 
                                        </p>

                                        <span class="author">- John Stark, business.com</span>
                                    </li>
                                </ul>
                            </section>
                        </li><!-- pi_testimonial end -->

                        <!-- .widget_tag_cloud start -->
                        <li class="widget widget_tag_cloud">
                            <div class="title">
                                <h5>popular searches</h5>
                            </div>

                            <div class="tagcloud">
                                <a href="blog-single.html">responsive</a>
                                <a href="blog-single.html">design</a>
                                <a href="blog-single.html">development</a>
                                <a href="blog-single.html">CSS3</a>
                                <a href="blog-single.html">photography</a>
                                <a href="blog-single.html">print</a>
                                <a href="blog-single.html">HTML5</a>
                            </div>
                        </li><!-- .widget_tag_cloud end -->

                        <!-- text_widget start -->
                        <li class="widget widget_text">
                            <div class="title">
                                <h5>text widget</h5>
                            </div>

                            <p>
                                Lorem ipsum dolor sit amet nec, 
                                consectetuer adipiscing elit. Aenean 
                                commodo ligula eget dolor. Aenean
                                massa. Cum sociis natoque penatibus 
                                et magnis dis parturient montes.
                            </p>

                        </li><!-- .widget_text end -->

                        <!-- .widget_categories start -->
                        <li class="widget widget_recent_comments">
                            <div class="title">
                                <h5>recent comments</h5>
                            </div>

                            <ul id="recent_comments">
                                <li>admin on
                                    <a href="blog-single.html">This is a sticky blog post with image</a>
                                </li>
                                <li>
                                    pixel-industry on
                                    <a href="blog-single.html">Blog post can have a gallery</a>
                                </li>
                                <li>
                                    my name on 
                                    <a href="blog-single.html">You can display video too</a>
                                </li>
                                <li>
                                    admin on 
                                    <a href="blog-single.html">Or maybe include some cool audio track</a>
                                </li>
                                <li>
                                    admin on 
                                    <a href="blog-single.html">This is a blog post with quote</a>
                                </li>
                                <li>
                                    pixel-industry on 
                                    <a href="blog-single.html">This is a classic blog post with text</a>
                                </li>
                            </ul>  
                        </li><!-- .widget_recent_entries end -->

                    </ul><!-- .aside_widgets end -->
                </aside><!-- .aside-right end -->
            </div><!-- container_12 end -->
        </section><!-- #content-wrapper end -->

        <!-- #footer-wrapper start -->
        <div id="footer-wrapper" class="clearfix">

            <!-- #footer -->
            <footer id="footer" class="container_12">

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">
                    
                    <!-- .widget.widget_text start -->
                    <li class="widget widget_text">

                        <section class="carousel-article">
                            <img src="img/red/logo-footer.png" alt="logo" />

                            <br /><br />

                            <ul id="foo1" class="carousel-li">
                                <li>
                                    <p>
                                        We proudly present you Metropolis, perfectly 
                                        clean and original theme. This is sliding 
                                        article, yo you can put more info about your 
                                        company.  
                                    </p>
                                </li>

                                <li>
                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error 
                                        sit voluptatem accusantium doloremque laudantium, 
                                        totam rem aperiam, eaque ipsa quae ab illo 
                                        inventore veritatis et quasi. 
                                    </p>
                                </li>

                                <li>
                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error 
                                        sit voluptatem accusantium doloremque laudantium, 
                                        totam rem aperiam, eaque ipsa quae ab illo 
                                        inventore veritatis et quasi. 
                                    </p>
                                </li>
                            </ul>

                            <div class="clearfix"></div>

                            <div class="carousel-pagination" id="foo1_pag"></div>
                        </section>

                    </li><!-- .widget.widget_text end -->
                </ul><!-- .footer-widget-container end -->

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">
                    <!-- .widget pi_recent_posts start -->
                    <li class="widget pi_recent_posts">
                        <div class="title">
                            <h5>latest posts</h5>
                        </div>

                        <ul class="footer-blog">
                            <li>
                                <div class="meta">
                                    <a class="icon-edit"></a>
                                </div>

                                <div class="post">
                                    <a href="blog-single.html"> Nam libero tempore, </a>
                                    <p class="info">26 MARCH 2013, <a href="blog-single.html">0 COMMENTS</a></p>
                                </div>
                            </li>

                            <li>
                                <div class="meta">
                                    <a class="icon-link"></a>
                                </div>

                                <div class="post">
                                    <a href="blog-single.html">Temporibus autem quibusdam, </a>
                                    <p class="info">26 MARCH 2013, <a href="blog-single.html">2 COMMENTS</a></p>
                                </div>
                            </li>

                            <li>
                                <div class="meta">
                                    <a class="icon-camera"></a>
                                </div>

                                <div class="post">
                                    <a href="blog-single.html">Excepteur sint occaecat cupid, </a>
                                    <p class="info">26 MARCH 2013, <a href="blog-single.html">2 COMMENTS</a></p>
                                </div>
                            </li>
                        </ul>


                    </li><!-- .widget pi_recent_posts end -->
                </ul><!-- .footer-widget-container end -->

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">
                    
                    <!-- .widget.widget_text start -->
                    <li class="widget widget_text">
                        <div class="title">
                            <h5>get in touch</h5>
                        </div>
                        <p>
                            If you have any questions don't hesitate to contact us
                        </p>

                        <br />

                        <ul class="contact-info">
                            <li class='address'>
                                <p>Address: Some street 123, Manhattan, New York, USA</p>
                            </li>

                            <li class="phone">
                                <p>Telephone: +00 123 5874</p>
                            </li>

                            <li class="mail">
                                <p>Email: <a href='mailto:sales-info@business.com'>info@business.com</a></p>
                            </li>
                        </ul>
                    </li><!-- .widget.widget_text end -->
                </ul><!-- .footer-widget-container end -->

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">
                    
                    <!-- .widget.widget_text start -->
                    <li class="widget widget_text">
                        <div class="title">
                            <h5>newsletter subscribe</h5>
                        </div>

                        <p>
                            Stay up to date with latest news from our company. 
                            We promise we won’t spam you.
                        </p>

                        <br />

                        <form class="newsletter">
                            <input type="email" class="email" placeholder="Enter your email here...">
                            <input type ="submit" class="submit" value="SEND">
                        </form>
                    </li><!-- .widget.widget_text end -->

                </ul><!-- footer-widget-container end -->
            </footer><!-- #footer end -->

            <!-- .container_12.copyright-container start -->
            <div class="container_12 copyright-container">
                
                <!-- .grid_12 start -->
                <div class="grid_12">                  

                    <div class="grid_6 alpha">
                        <p>
                            Copyright Metropolis 2013. Designed by Pixel industry. All rights reserved.
                        </p>
                    </div>

                    <div class="grid_6 omega">
                        <ul class="footer-breadcrumbs">
                            <li>
                                <a href="index.html">Home</a>
                            </li>

                            <li>
                                <a href="about.html">About</a>
                            </li>

                            <li>
                                <a href="portfolio1.html">Portfolio</a>
                            </li>

                            <li>
                                <a href="blog.html">Blog</a>
                            </li>

                            <li>
                                <a href="contact.html">Contact</a>
                            </li>
                        </ul>
                    </div><!-- .grid_6 omega end -->
                </div><!-- .grid_12 end -->
            </div><!-- .container_12.copyright-container end -->
        </div><!-- #footer-wrapper end -->

        <!-- scripts -->
        <script  src="js/jquery-1.8.3.js"></script> <!-- jQuery library -->  
		 <script  src="js/jquery.easing.1.3.min.js"></script> <!-- jQuery easing -->  
        <script  src="js/jquery.placeholder.min.js"></script><!-- jQuery placeholder fix for old browsers -->
        <script  src="js/jquery.carouFredSel-6.0.0-packed.js"></script><!-- CarouFredSel carousel plugin -->
        <script  src="js/jquery.nivo.slider.js"></script><!-- nivo slider -->
        <script  src="js/jplayer/jquery.jplayer.min.js"></script> <!-- jQuery audio player -->
        <script  src="js/jquery.touchSwipe-1.2.5.js"></script><!-- support for touch swipe on mobile devices -->
        <script  src="style-switcher/styleSwitcher.js"></script><!-- Style Switcher plugin -->
        <script  src="js/include.js"></script> <!-- jQuery custom options -->
		<script src="js/jquery.ui.totop.js"></script> <!-- UItoTop plugin  -->
		<script type="text/javascript">
			// UItoTop plugin 
			$(document).ready(function() {		
				$().UItoTop({ easingType: 'easeOutQuart' });
			});
		</script>

        <script>
            /* <![CDATA[ */
            // NEWSLETTER FORM AJAX SUBMIT
            $('.newsletter .submit').on('click', function(event){
                event.preventDefault();
                var email = $('.email').val();
                var form_data = new Array({ 'Email' : email});
                $.ajax({
                    type: 'POST',
                    url: "contact.php",
                    data: ({'action': 'newsletter', 'form_data' : form_data})
                }).done(function(data) {
                    alert(data);
                });
            });

            /* NIVO SLIDER */
            $(window).load(function() {
                $('#slider').nivoSlider();
            });

            /* AUDIO PLAYER */
            $("#jquery_jplayer_1").jPlayer({
                ready: function() {
                    $(this).jPlayer("setMedia", {
                        m4a: "http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a",
                        oga: "http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
                    });
                },
                swfPath: "js/jplayer/",
                supplied: "m4a, oga",
                wmode: "window"
            });

            // FOOTER CAROUSEL ARTICLE 
            $("#foo1").carouFredSel({
                auto: true,
                scroll: 1,
                pagination: "#foo1_pag",
                swipe: {
                    ontouch: true,
                    onMouse: true
                },
                width: 'variable',
                height: 'variable',
                items: {
                    width: 'auto',
                    visible: 1
                }
            });

            // TESTIMONIAL CAROUSEL
            $("#foo2").carouFredSel({
                auto: true,
                scroll: 1,
                swipe: {
                    ontouch: true,
                    onMouse: true
                },
                width: 'variable',
                height: 'variable',
                items: {
                    width: 'auto',
                    visible: 1
                }
            });
            /* ]]> */
        </script>
    </body>
</html>
